<template>
  <div>
    <div class="recommend-title">
      热销推荐
    </div>
    <ul>
      <li class="item" v-for="item of recommendList" :key="item.id">
        <img :src="item.path" alt="" class="itemImg">
        <div class="itemInfo">
          <p class="item-title text-wrap">{{item.title}}</p>
          <p class="item-desc text-wrap">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        {
          id: '1',
          path: 'http://img1.qunarzz.com/sight/p0/1602/b4/b46db7ef2c17a91890.water.jpg_200x200_07ec4016.jpg',
          title: '大连圣亚海洋世界',
          desc: '浪漫大连首站，浪漫的海洋主题乐园浪漫大连首站，浪漫的海洋主题乐园'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
  .recommend-title {
    font-size: .16rem;
    margin: {
      top: .1rem;
    }
    line: {
      height: .4rem;
    }
    background: #eee;
    text-indent: .1rem;
  }
  .item {
    overflow: hidden;
    display: flex;
    height: 1rem;
    font-size: .14rem;
    .itemImg {
      width: .8rem;
      height: .8rem;
      padding: .1rem;
    }
    .itemInfo {
      flex: 1;
      padding: .1rem;
      min-width: 0;
      .item-title {
        line-height: .27rem;
      }
      .item-desc {
        line-height: .2rem;
        color: #ccc;
      }
      .item-button {
        line-height: .22rem;
        margin: {
          top: .08rem;
        }
        background: #ff9300;
        padding: 0 .05rem;
        border-radius: .05rem;
        color: #fff;
        font-size: .12rem;
      }
    }
  }
</style>
